<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
		</div>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//父===>子
			//1.先给父组件中绑定自定义的属性  :childData='msg'
			//2.在子组件中使用props接收父组件传递的数据 props:['childData']
			//3.可以在子组件中任意使用
			//简述：子绑定属性，子props接收
			
			//子===>父
			//1.在父组件绑定自定义事件 @childHandler='childHandler'
			//2.在子组件中 触发原生的事件 在函数中使用$emit触发自定义的childHander
			//简述：子$emit事件触发，父绑定监听事件

			Vue.component('Parent',{
				data(){
					return{
						msg:"我是父组件的数据",
						zichuanfu:''
					}
				},
				template:`
				<div>
					我是一个父组件
					子传父，等于后面的事件可以自定义，没必要和子组件的事件相同
					<Child :childData='msg' @childHandler1='childHandler'/>
					3：{{zichuanfu}}
				</div>
				`,
				methods:{
					childHandler(val){
						console.log("3:"+val);
						this.zichuanfu=val;
					}
				}
			});
			
			Vue.component('Child',{
				template:`
					<div>
					  我是一个子组件
					  {{childData}}
					  你要在这里触发这个事件，才发生子传父	
					  {{changeValue()}}
					</div>
				`,
				props:['childData'],
				/* 
					开发中一般不用数组接收，使用对象
					props:{
						//1.类型限制
						childData:String,

						//2.提供一些默认值，以及必传值
						childData:{
							type:String,
							default:'你所写的默认值',
							required:true
						},

						//3.类型是对象或者数组时，默认值必须是一个函数
						childData：{
							type:Array,
							default(){
								return []
							}
						}
					}

				*/
				data(){
					return{
						zi:'孩子的值传给父亲'
					}
				},
				methods:{
					changeValue(val){
						//$emit(自定义的事件名，消息)
						//子组件发射事件，父组件监听事件
						this.$emit('childHandler1',this.zi);
					}
				}
			});
		
			//1.声明局部组件(声子)
			var App={
				//组件必有一个模板
				template:`
					<div>
						<Parent />
					</div>
				`,
				components:{
					
				}
			};
			new Vue({
				el:'#app',
				data(){
					return{
						
					}
				},
				//2.挂载局部组件(挂子)
				components:{
					App
				},
				//3.用子
				template:'<App />'
			});
		</script>
	</body>
</html>
